<template>
    <div>
        <van-nav-bar title="选择优惠券" left-arrow @click-left="onClickLeft" />

        <div class="box">
       <div class="left">4.8折</div>
       <div class="mid">
        <div>大师咖啡</div>
        <div>有效期</div>
    </div>
       <div class="right">
        <div  @click="btn" :class="color?'btn':'nobtn'"></div>
        <div>使用规则</div>
       </div>
           
          
        </div>



        <div class="bot">
            <van-button type="primary" block @click="Next"  >确认</van-button>
        </div>



    </div>
</template>

<script setup>
import { ref } from 'vue';

const onClickLeft = () => history.back();
const onClickRight = () => showToast('按钮');

let color =ref(true)
const btn=()=>{
    color.value=!color.value
}
</script>

<style lang="scss" scoped>


.box {
    width: 90%;
    height: 100px;
    margin: 5%;
    display: flex;
    justify-content: space-around;
    background-color: white;
    border-radius: 5px;

    .left{
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: rgb(23, 100, 193);
}

.mid{
    width: 200px;
    height: 100px;
    :nth-child(1){
        width: 200px;
        line-height: 50px;
    height: 50px;
    }
    :nth-child(2){
        width: 200px;
    height: 50px;
    font-size: 16px;
    }
}
.right{
    width: 50px;
    height: 100px;
    :nth-child(1){
        margin-top: 20px;
        margin-left: 10px;
        border-radius: 20px;
        width: 30px;
        height: 30px;
    }
    :nth-child(2){
        margin-top: 20px;
        width: 50px;
        height: 50px;
        font-size: 12px;
    }
    
}
}

.bot {
    width: 90%;
    height: 100px;
    
   margin-bottom: 10px;
   margin-left: 5%;
    position: fixed;
    top: 90%;
   text-align: center;


}
.btn{
    margin-top: 20px;
        margin-left: 10px;
        border-radius: 20px;
        border: solid 1px rgb(195, 88, 39);
        width: 30px;
        height: 30px;  
        background-color: rgb(202, 226, 67);
}
.nobtn{
    margin-top: 20px;
        margin-left: 10px;
        border-radius: 20px;
        border: solid 1px rgb(195, 88, 39);
        width: 30px;
        height: 30px;  
}
</style>